<template>
  <div class="user">
    <!-- 头部 -->
    <a-form
      ref="formRef"
      style="padding-top: 20px"
      class="main-bg-color"
      :rules="rules"
      :model="form"
      :hideRequiredMark="true"
      :label-col="labelCol"
    >
      <a-row :gutter="20">
        <a-col :span="5" :lg="5" :xs="10" :md="8">
          <a-form-item name="keyword" label="关键词">
            <a-input v-model:value="form.keyword" placeholder="请输入关键词"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="5" :lg="5" :xs="10" :md="8">
          <a-form-item name="publishId" label="发布人员">
            <a-input v-model:value="form.publishId" placeholder="请输入发布人员ID"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="5" :lg="5" :xs="15" :md="8">
          <a-form-item label="发送时间">
            <a-range-picker v-model:value="time" @change="panelChange"></a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :span="2" :offset="2">
          <a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-divider></a-divider>
    <a-table
      :columns="columns"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :row-selection="rowSelection"
    >
      <template #type="{ record }">
        <p style="margin: 0">
          {{ record.type == 1 ? '护士端' : record.type == 2 ? '用户端' : '所有人' }}
        </p>
      </template>
      <template #expandedRowRender="{ record }">
        <p style="margin: 0">
          {{ record.content }}
        </p>
      </template>
      <template #operation="{ record }">
        <a-button type="link" danger @click="del(record.key, true)" v-has="{ a: $route, b: 2 }">删除</a-button>
      </template>
    </a-table>
    <a-divider></a-divider>
    <a-row>
      <a-col :span="2">
        <a-button type="danger" @click="deleteList" v-has="{ a: $route, b: 2 }">删除</a-button>
      </a-col>
    </a-row>

    <!-- <a-card :hoverable="true" v-for="(item,index) in data" :key="index">
        <template #title>
             <a-checkbox v-model:checked="item.checked" style="display:flex;align-items:center;">
                <a-row :gutter="20">
                    <a-col :span="8">发布人员：admin</a-col>
                    <a-col :span="8">发送时间：2022</a-col>
                    <a-col :span="8">发送对象：20个人</a-col>
                </a-row>
            </a-checkbox>
        </template>
        <template #extra><a-button type="link" danger @click="del">删除</a-button></template>
            哈哈哈哈哈哈你好啊啊啊啊真好
      </a-card> -->
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { selectAllSms, deleteSms } from '@/api/setting/index'
import { useModal } from '@/hooks'
const plainOptions = ['Apple', 'Pear', 'Orange']
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const formRef = ref('')
    const form = reactive({})
    const rules = {
      portValue: [{ required: true, message: '请选择端口!', trigger: 'change' }]
    }
    const data = reactive({
      list: [],
      time: []
    })

    const loading = ref(true) //表格的加载

    const columns = [
      {
        title: '发布人员',
        dataIndex: 'realName',
        className: 'table',
        align: 'center'
      },
      {
        title: '发送时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center',
        sort: true
      },
      {
        title: '发送对象',
        dataIndex: 'type',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'type'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })
    // 查询
    const search = () => {
      console.log(form, '表单内容')
      formRef.value
        .validate()
        .then(() => {
          console.log('values', formState, toRaw(formState))
        })
        .catch(error => {
          console.log('error', error)
        })
    }
    // 选择时间
    const panelChange = (date, dateString) => {
      form.startTime = dateString[0]
      form.endTime = dateString[1]
    }

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    const delListId = ref('')
    // 全选反选
    const rowSelection = ref({
      checkStrictly: false,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        delListId.value = selectedRowKeys
      },
      onSelect: (record, selected, selectedRows) => {
        // console.log(record, selected, selectedRows,'选择多项');
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        // console.log(selected, selectedRows, changeRows,'全选操作');
      }
    })

    // 删除
    const del = (key, flag) => {
      let data = []
      if (flag) {
        data = [key]
      } else {
        data = key
      }
      const { closeModal } = useModal.confirm({
        title: '确定删除当前短信吗?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: async () => {
          let res = await deleteSms(data)
          if (res.success) {
            message.success('删除成功')
            init()
            closeModal()
          }
        }
      })
    }
    const deleteList = () => {
      console.log(delListId.value)
      if (delListId.value.length == 0) {
        message.warning('请选择你要删除的短信')
        return
      }
      del(delListId.value)
    }
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: ['Apple', 'Orange']
    })

    const onCheckAllChange = e => {
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false
      })
    }
    init()
    async function init() {
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form
      }
      let res = await selectAllSms(obj)
      if (res.success) {
        data.list = res.object.list.filter(el => (el.key = el.id))
        page.total = res.object.total
        loading.value = false
      }
    }

    watch(
      () => state.checkedList,
      val => {
        state.indeterminate = !!val.length && val.length < plainOptions.length
        state.checkAll = val.length === plainOptions.length
      }
    )
    return {
      ...toRefs(data),
      formRef,
      form,
      rules,
      loading,
      search,
      panelChange,
      del,
      labelCol: { style: { fontWeight: 'bolder', width: '100px' } },
      ...toRefs(state),
      plainOptions,
      onCheckAllChange,
      columns,
      rowSelection,
      handleTableChange,
      pagination,
      deleteList
    }
  }
}
</script>
<style scoped lang="less"></style>
